<template>
  <v-container class="player">
    <v-row justify="center">
      <v-col cols="8">
        <v-data-table
          :headers="headers"
          :items="$store.state.players"
          height="435px"
          class="elevation-1"
          :footer-props="{
            showFirstLastPage: true,
            itemsPerPageOptions:[8,16,24,-1],
            itemsPerPageText:'每页显示条数'
          }"
        >
          <template v-slot:top>
            <v-toolbar flat rounded>
              <v-toolbar-title>选手名单</v-toolbar-title>
              <v-divider class="mx-4" inset vertical></v-divider>
              <v-spacer></v-spacer>
              <v-dialog v-model="dialog" persistent max-width="350px">
                <template v-slot:activator="{ on, attrs }">
                  <v-btn color="#845ec2" rounded dark class="mb-2" v-bind="attrs" v-on="on">创建</v-btn>
                </template>
                <v-card>
                  <v-card-title>
                    <span class="headline">{{ formTitle }}</span>
                  </v-card-title>

                  <v-card-text>
                    <v-container @keyup.enter="save">
                      <v-row>
                        <v-col cols="12">
                          <v-text-field
                            v-model="name"
                            clearable
                            autofocus
                            :error-messages="nameMsg"
                            prepend-inner-icon="mdi-account"
                            label="姓名"
                          ></v-text-field>
                        </v-col>
                        <v-col cols="12">
                          <v-text-field
                            v-model="school"
                            clearable
                            :error-messages="schoolMsg"
                            prepend-inner-icon="mdi-school"
                            label="学校"
                          ></v-text-field>
                        </v-col>
                      </v-row>
                    </v-container>
                  </v-card-text>

                  <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue darken-1" ripple text @click="close">关闭</v-btn>
                    <v-btn color="blue darken-1" ripple text @click="save">保存</v-btn>
                  </v-card-actions>
                </v-card>
              </v-dialog>
            </v-toolbar>
          </template>
          <template v-slot:item.actions="{ item }">
            <v-icon small class="mr-2" @click="edit(item)">mdi-pencil</v-icon>
            <v-icon small @click="del(item)">mdi-delete</v-icon>
          </template>
          <template v-slot:no-data>没有数据！</template>
        </v-data-table>
      </v-col>
    </v-row>

    <v-snackbar v-model="snackbar" top right color="#845ec2">
      删除成功！
      <template v-slot:action="{ attrs }">
        <v-btn color="pink" text v-bind="attrs" ripple @click="snackbar = false">关闭</v-btn>
      </template>
    </v-snackbar>
  </v-container>
</template>
<script>
import { Vue, Component } from "vue-property-decorator";
@Component
export default class Player extends Vue {
  name = "";
  school = "";
  dialog = false;
  editedIndex = -1;
  snackbar = false;
  nameMsg = [];
  schoolMsg = [];
  headers = [
    {
      text: "姓名",
      sortable: false,
      value: "name"
    },
    {
      text: "学校",
      sortable: false,
      value: "school"
    },
    {
      text: "操作",
      align: "end",
      sortable: false,
      value: "actions"
    }
  ];
  get formTitle() {
    return this.editedIndex == -1 ? "创建" : "修改";
  }
  save() {
    if (!/^[\u4E00-\u9FA5]+$/.test(this.name)) {
      this.nameMsg = ["请填写姓名！"];
    }
    if (!/^[\u4E00-\u9FA5]+$/.test(this.school)) {
      this.schoolMsg = ["请填写学校！"];
    }
    this.nameMsg.splice(0, this.nameMsg.length);
    if (this.editedIndex > -1) {
      this.$store.commit("editPlater", {
        index: this.editedIndex,
        name: this.name,
        school: this.school
      });
    } else {
      this.$store.commit("addPlayer", { name: this.name, school: this.school });
      this.name = "";
      this.school = "";
    }
    this.close();
    this.editedIndex = -1;
  }
  close() {
    this.dialog = false;
    this.$nextTick(() => {
      this.editedIndex = -1;
      this.name = "";
    });
  }
  edit(item) {
    this.editedIndex = this.$store.getters.getIndex(item);
    this.name = item.name;
    this.school = item.school;
    this.dialog = true;
  }

  del(item) {
    if (confirm(`您确定要删除 ${item.name} 的信息吗?`)) {
      this.$store.commit("delPlayer", item);
      this.snackbar = true;
    }
  }
}
</script>

<style lang="scss">
</style>